<!--
Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<link rel="import" href="../model/patch-summary.html">
<link rel="import" href="../model/patch-summary-list.html">
<link rel="import" href="./tom-patch-summary.html">
<link rel="import" href="./paper-multi-menu.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-shadow/paper-shadow.html">

<polymer-element name="tom-patch-summary-list" attributes="model">
  <template>
    <link rel="stylesheet" href="./tom-patch-summary-list.css">
    <link rel="stylesheet" href="./tom-patch-summary.css">
    <paper-shadow z="2" class="shadow-box">
      <div class="list-box">
        <div class="list-header">
          <span class="header-title">Worst {{ model.unit }}</span><br>
          From: {{ model.graphInterval.begin | timestampToDateString }}<br>
          Until: {{ model.graphInterval.end | timestampToDateString }}
          <paper-button class="close" on-tap="{{ close }}">X</paper-button>
        </div>

        <div class="view-menu">
          View:
          <paper-multi-menu id="viewMenu" model="{{ _viewMenu }}"></paper-multi-menu>
        </div>

        <div class="row">
          <div class="metric-cell column header">Graph metric</div>
          <div class="patch-cell column header">Patch</div>
          <div class="column-container">

            <template if="{{ $.viewMenu.value == 'jobs' }}">
              <div class="column grow header">{{ $.viewMenu.subMenu.text }} jobs</div>
            </template>

            <template if="{{ $.viewMenu.value == 'timeline' }}">
              <template bind="{{ model[$.viewMenu.subMenu.value] as interval }}">
                <div class="column grow header">
                  Timeline Interval<br>
                  {{ interval.begin | timestampToLocaleString }}<br>
                  {{ interval.end | timestampToLocaleString }}
                </div>
              </template>
            </template>

            <template if="{{ $.viewMenu.value == 'summary' }}">
              <template repeat="{{ column in _summaryColumns }}">
                <div class="column header">{{ column.header }}</div>
              </template>
            </template>

          </div>
        </div>

        <div class="item-rows">
          <template repeat="{{ patchSummary in model._list }}">
            <tom-patch-summary model="{{ patchSummary }}" viewMenu="{{ $.viewMenu }}"></tom-patch-summary>
          </template>
        </div>
      </div>
    </paper-shadow>
  </template>
  <script>
    Polymer({
      ready: function() {
        this._viewMenu = PatchSummaryList.viewMenu;
        this._summaryColumns = PatchSummary.summaryColumns;
      },
      close: function() {
        this.model.clear();
      },
      timestampToDateString: function(timestamp) {
        return new Date(timestamp * 1000).toString();
      },
      timestampToLocaleString: function(timestamp) {
        return new Date(timestamp * 1000).toLocaleString();
      },
    });
  </script>
</polymer-element>
